About conflicting styles

When you apply two or more styles to the same text, the styles may conflict and produce unexpected results. Browsers apply style attributes according to the following rules:

If two styles are applied to the same text, the browser displays all attributes of both styles unless specific attributes conflict. For example, one style may specify blue as the text color and the other style red.
If attributes from two styles applied to the same text conflict, the browser displays the attribute of the innermost style (the style closest to the text itself).
If there is a direct conflict, the attributes from custom styles (style applied with CLASS attribute) overrule attributes from HTML tag styles.

In the example that follows, the style defined for H1 might specify the font, size, and color for all H1 paragraphs, but the custom style Blue applied to this paragraph overrules the color setting in the H1 style. The second custom style Red overrules Blue because it is completely inside the Blue style.

<h1><span class="Blue">This paragraph is controlled by the Blue custom style and HI
HTML tag style.<span class="Red">Except this sentence is controlled by the red style.
</span>Now we're back to the Blue style.</span></h1>